<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/icon/iconfont.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>Document</title>
    <style>
        /* 媒体查询 */
        @media all and (min-width:768px) {
            .sec-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

            }

            .sec-container .sec-container-task {
                width: 47%;
                margin: 10px;
            }
        }

        /* svg的样式 */
        svg text {
            /*文本水平居中*/
            text-anchor: middle;
            dominant-baseline: middle;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- header -->
        <header>
            <div class="header">
                <div class="header-logo">
                    <img src="./icon.png" style="width: 35px;">
                </div>
                <div class="header-icon">
                    <i class="iconfont icon-xiaoxitixing"></i>
                </div>
            </div>
            <h2>Hi! FYJ!</h1>
        </header>
        <!-- nav -->
        <nav>
            <header class="nav-header">
                <div class="nav-header-text">
                    <h3>Health stats</h3>
                </div>
                <div class="nav-header-icon">
                    <span style="color: #585ce5;"><i class="iconfont icon-rili"
                            style="vertical-align: -20%;"></i>weekly</span>
                </div>
            </header>
            <div class="nav-container">
                <div class="nav-container-item">
                    <div class="picture">
                        <div class="picture-background active" style="background-color: #d0d1ff;">
                            <div class="picture-container">
                                <div class="picture-container-img" style="background:#a1a3f6">
                                    <img src="./images/lungs.png" alt="">
                                </div>
                                <img src="./images/right.png">
                            </div>
                            <div class="info-container">
                                <span style="color:#415371">Breath Rate</span>
                                <span style="font-weight: 700;margin-top: 10px;">12 Brm</span>
                            </div>
                        </div>
                    </div>
                    <div class="picture">
                        <div class="picture-background" style="background-color: #c9ebed;">
                            <div class="picture-container">
                                <div class="picture-container-img" style="background:#99d7db">
                                    <img src="./images/heart-rate.png" alt="">
                                </div>
                                <img src="./images/right.png">
                            </div>
                            <div class="info-container">
                                <span style="color:#415371">Heart Rate</span>
                                <span style="font-weight: 700;margin-top: 10px;">68 BPM</span>
                            </div>
                        </div>
                    </div>
                    <div class="picture">
                        <div class="picture-background" style="background-color: #f7ecee;">
                            <div class="picture-container">
                                <div class="picture-container-img" style="background:#f4dde0">
                                    <img src="./images/blood-pressure.png" alt="">
                                </div>
                                <img src="./images/right.png">
                            </div>
                            <div class="info-container">
                                <span style="color:#415371">Blood Pressure</span>
                                <span style="font-weight: 700;margin-top: 10px;">122 / 87</span>
                            </div>
                        </div>
                    </div>
                    <div class="picture">
                        <div class="picture-background" style="background-color: #d0d1ff;">
                            <div class="picture-container">
                                <div class="picture-container-img" style="background:#a1a3f6">
                                    <img src="./images/lungs.png" alt="">
                                </div>
                                <img src="./images/right.png">
                            </div>
                            <div class="info-container">
                                <span style="color:#415371">Breath Rate</span>
                                <span style="font-weight: 700;margin-top: 10px;">12 Brm</span>
                            </div>
                        </div>
                    </div>
                    <div class="picture">
                        <div class="picture-background" style="background-color: #c9ebed;">
                            <div class="picture-container">
                                <div class="picture-container-img" style="background:#99d7db">
                                    <img src="./images/heart-rate.png" alt="">
                                </div>
                                <img src="./images/right.png">
                            </div>
                            <div class="info-container">
                                <span style="color:#415371">Heart Rate</span>
                                <span style="font-weight: 700;margin-top: 10px;">68 BPM</span>
                            </div>
                        </div>
                    </div>
                    <div class="picture">
                        <div class="picture-background" style="background-color: #f7ecee;">
                            <div class="picture-container">
                                <div class="picture-container-img" style="background:#f4dde0">
                                    <img src="./images/blood-pressure.png" alt="">
                                </div>
                                <img src="./images/right.png">
                            </div>
                            <div class="info-container">
                                <span style="color:#415371">Blood Pressure</span>
                                <span style="font-weight: 700;margin-top: 10px;">122 / 87</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <!-- section -->
        <section style="padding: 30px 0 85px 0;">
            <div class="sec-header">
                <h3>To-do list</h3>
                <span style="color: #585ce5;;"><i class="iconfont icon-jiahao"></i>Add task </span>
            </div>
            <div class="sec-container">
                <div class="sec-container-task">
                    <div class="picture">
                        <img src="./images/breath.png" alt="">
                    </div>
                    <div class="task-info">
                        <p class="name">Breath training</p>
                        <button class="continue">Continue exercise</button>
                    </div>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" height="80" width="80">
                            <!-- 设置底色的圆环 -->
                            <circle cx="40" cy="40" r="25" fill="none" stroke="grey" opacity="0.2" stroke-width="5"
                                stroke-linecap="round">
                            </circle>
                            <!-- 设置进度条 -->
                            <circle class="progress" transform="rotate(-90,40,40)" cx="40" cy="40" r="25" fill="none"
                                stroke="rgb(88, 198, 205)" stroke-width="5" stroke-linecap="round"
                                stroke-dasharray="0,1000"></circle>
                            <!-- stroke-dasharray:一个表示长度，一个表示间距 -->
                            <!-- 设置文本 -->
                            <text class="text" x="40" y="40" font-size="15" fill="black">36</text>
                        </svg>
                    </div>
                </div>
                <div class="sec-container-task">
                    <div class="picture">
                        <img src="./images/medicine.png" alt="">
                    </div>
                    <div class="task-info">
                        <p class="name">Omega 3</p>
                        <span class="detail">1 pill after meal</span>
                    </div>
                    <div>
                        <img src="./circle-complete.svg" alt="">
                    </div>
                </div>
                <div class="sec-container-task">
                    <div class="picture">
                        <img src="./images/medicine.png" alt="">
                    </div>
                    <div class="task-info">
                        <p class="name">Vitamin D</p>
                        <span class="detail">1 sashet before meal</span>
                    </div>
                    <div>
                        <img src="./circle-end.svg" alt="">
                    </div>
                </div>
                <div class="sec-container-task">
                    <div class="picture">
                        <img src="./images/person.png" alt="">
                    </div>
                    <div class="task-info">
                        <p class="name">Step Goal</p>
                        <span class="detail">1 sashet before meal</span>
                    </div>
                    <div>
                        <img src="./circle-end.svg" alt="">
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- footer -->
    <footer class="app-foot">
        <div class="footer-container">
            <span>
                <div class="navigator-icon active">
                    <a href="#">
                        <img src="./images/home-select.png" style="width:30px;height: 30px;" alt="">
                    </a>
                </div>
            </span>
            <span>
                <div class="navigator-icon">
                    <a href="#">
                        <img src="./images/clock-unselect.png" style="width:30px;height: 30px;" alt="">
                    </a>
                </div>
            </span>
            <span>
                <div class="navigator-icon">
                    <a href="#">
                        <img src="./images/develop-unselect.png" style="width:30px;height: 30px;" alt="">
                    </a>
                </div>
            </span>
            <span>
                <div class="navigator-icon">
                    <a href="#">
                        <img src="./images/setting-unselect.png" style="width:30px;height: 30px;" alt="">
                    </a>
                </div>
            </span>
        </div>
    </footer>
    <script src="./js/index.js"></script>
</body>

</html>